背景
在调整typescript项目结构,全局变量尽量少用,但还是必不可少的,既要合理的引入,又要能用上vscode的智能提示。上篇日志已经记录了,在vscode中开发,全局变量的定义与声名是分开的,要做好对应。
需求描述
- 全局自定义工具类,本团队自主开发的小工具,需要能有智能提示
- 加入常用的第三方工具到全局,也需要能有智能提示
- 用bluebird替换全局Promise
源代码目录结构
- src/common/globUtils.ts,这是本团队自主开发小工具
- src/inits/global.ts,这是全局变量的代码定义文件
- src/globals.d.ts,这是全局变量声名文件
├── src
│ ├── app.ts
│ ├── common
│ │ └── globUtils.ts
│ ├── config
│ │ └── log4js.ts
│ ├── globals.d.ts
│ ├── index.ts
│ └── inits
│ ├── global.ts
│ └── tasks.ts
├── tsconfig.json
├── tslint.json
自定义工具模板
export default class GlobUtils {
isDev() {
return global.NODE_ENV !== 'prod'
}
}
注意事项:
- 导出时必须给出类名称, 不然vscode会提示出错。
- 其实这最好用静态方法,但vscode的智能提示会忽略掉静态方法,放弃。
- 在全局定义时,因为此处给出了类名,导入的是类,不是实例。
全局变量代码定义
import * as lodash from 'lodash'
import * as Bluebird from 'bluebird'
import GlobUtils from '../common/globUtils'
export default {
async init() {
Object.assign(global, {
ROOT_PATH: process.cwd(),
NODE_ENV: process.env.NODE_ENV || 'dev', //dev - 开发; prod - 生产; test - 测试;
Promise: Bluebird,
__: lodash,
globUtils: new GlobUtils(),
})
}
}
注意事项:
- import引入形式必须为 import * as lodash from 'lodash',vscode建议的形式会出错
- 用Object.assign来将新属性加到global上
- globUtils需要的是实例,注意几种导入形式,及默认导出时,类名给不给出,导入的结果是不同的,这里是类,需要new出实例来。
全局变量声名文件
import { Logger } from 'log4js'
import GlobUtils from './common/globUtils'
import * as lodash from 'lodash'
type LODASH = typeof lodash
declare global {
namespace NodeJS {
interface Global {
logger: Logger,
NODE_ENV: string,
ROOT_PATH: string,
globUtils: GlobUtils,
__: LODASH,
}
}
}
注意事项:
- 第一种导入方式,Logger引入类,直接声明为全局变量,import后已经实例化
- 第二种导入方式,lodash为命名空间,type LODASH声明为全局变量
- 第三种导入方式,GlobUtils为默认命名导出,import后为类,还未实例化
用bluebird替换全局的Promise
用@types/bluebird-global替换@types/bluebird,即可完成替换。我们只需要在代码定义中增加它的定义就好了。
注意事项:
- Promise直接调用,其它全局变量在global下,虽然在实际环境中,两个都存在,智能检测只认一边,这也有利于我们编码时区分全局变量。
代码地址
代码是这个项目的基础,此项目我准备将express+mysql的成功经验移植到koa2中来。
https://github.com/zhoutk/gels
使用方法
git clone https://github.com/zhoutk/gels
cd gels
git checkout 9ea084f
yarn
tsc -w
用vscode打开项目,并按F5运行
小结
终于迈入typescript坑中,痛并快乐着!
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。